<script setup>
import {ref} from "vue";
import {adminLogin} from "@/request/mid_interface.js";
import {ElMessage} from "element-plus";
import {View, Hide} from "@element-plus/icons-vue"


const username = ref("")
const password = ref("")

const visiblePassword = ref(false)

async function login() {
  const res = await adminLogin({
    "username": username.value,
    "password": password.value,
  })
  if (res.code) {
    ElMessage.success({
      message: res.msg
    })
    localStorage.token = res.data
  } else {
    ElMessage.warning({
      message: res.msg
    })
  }
}

</script>

<template>
  <div class="w-full flex justify-center">
    <div class="bg-white px-10 py-5 mt-3 rounded-xl flex flex-col items-center">
      <div class="font-bold text-base mt-2">请登录</div>
      <input v-model="username" placeholder="请输入账号" class="bg-gray-100 px-4 py-4 min-w-80 mt-5 rounded-xl mb-3">
      <div class="relative">
        <input v-model="password" :type="visiblePassword?'text':'password'" placeholder="请输入密码"
               class="bg-gray-100 px-4 py-4 min-w-80 rounded-xl required">
        <div @click="visiblePassword=!visiblePassword" v-if="!visiblePassword" class="cursor-pointer select-none absolute right-2 p-3 top-1/2 box-border" style="transform: translateY(-50%)">
          <el-icon>
            <View/>
          </el-icon>
        </div>
        <div @click="visiblePassword=!visiblePassword" v-if="visiblePassword" class="cursor-pointer select-none absolute right-2 p-3 top-1/2 box-border" style="transform: translateY(-50%)">
          <el-icon>
            <Hide/>
          </el-icon>
        </div>
      </div>
      <div @click="login"
           class="px-8 py-2 text-white font-bold rounded-xl mt-6 mb-2 cursor-pointer select-none hover:opacity-50"
           style="background: #E9A325">登录
      </div>
    </div>
  </div>
</template>
